<template>
  <div class="flexContent">
    <div class="searchBox">
      <!-- 广告管理 -->
      <el-form class="demo-form-inline" label-position="left" label-width="auto">
        <div class="serFlexBox">
          <div class="inputBox">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="暂无搜索">
                  <el-input></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="btnBox">
            <el-button class="searchBtn" icon="el-icon-search">搜索</el-button>
            <el-button class="resetBtn" icon="el-icon-refresh-right">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>

    <div class="add">
      <el-button class="addBtn" v-has="'agreement_add'" @click="addFn">新增</el-button>
    </div>

    <div class="table" id="tableBox" v-height>
      <div style="flex:1;">
        <vxe-table :column-config="{ resizable: true }" border class="tablebox" ref="xTable1"
          :row-config="{ isHover: true }" :scroll-y="{ enabled: true, gt: 21 }" style="width: 100%" height="100%"
          size="medium" align="center">
          <vxe-column type="seq" width="80" title="序号" />
          <vxe-column field="number" title="名称" />
          <vxe-column field="name" title="图片">
            <template v-slot="{ row }">
              <el-image style="width: 100px; height: 100px" :src="row.img"></el-image>
            </template>
          </vxe-column>
          <vxe-column field="name" title="描述" />
          <vxe-column field="name" title="状态">
            <template v-slot="{ row }">
              <el-tag v-if="row.state === '0'" disabled type="primary" plain size="small">显示</el-tag>
              <el-tag v-if="row.state === '1'" disabled type="info" plain size="small">不显示</el-tag>
            </template>
          </vxe-column>
          <vxe-column v-if="$showFn(['agreement_edit', 'agreement_del'])" fixed="right" width="200" title="操作">
            <template v-slot="{ row }">
              <el-button type="text" v-has="'agreement_edit'" style="margin-right: 10px; color: rgb(0, 132, 255)"
                @click.stop="agreementDetail(row)">编辑</el-button>
              <el-button style="color: red;" type="text" v-has="'agreement_del'"
                @click="$delFn('广告', del, row)">删除</el-button>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="paginationBox">
        <el-pagination :current-page="page.pageNum" background :page-sizes="$pageSizes" :page-size="page.pageSize"
          layout="total,-> , sizes, prev, pager, next, jumper" :total="page.total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <el-drawer :title="title" :visible.sync="drawer" size="50%">
      <el-form class="demo-form-inline" label-position="left" style="padding-left: 20px;" label-width="auto"
        ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="广告名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入广告名称" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="type">
          <el-select v-model="ruleForm.type" filterable clearable popper-class="eloption" style="width: 80%">
            <el-option v-for="(val, key) in typeList" :key="key" :value="key" :label="val" />
          </el-select>
        </el-form-item>
        <el-form-item label="广告内容" prop="content">

        </el-form-item>
      </el-form>
      <div class="btnBOX">
        <el-button class="celBtn" @click="cancelFn" style="margin-right: 50px;">取 消</el-button>
        <el-button class="addBtn" @click="submitForm" v-has="'agreement_add'">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getAgreementList, updateAgreement, addAgreement, deleteAgreement } from "@/api/shopManagement";
import { getDictValueAndNameSource } from "@/api/dictionary";
export default {
  name: "GoodsInfo",
  data() {
    return {
      drawer: false,
      title: '新增广告',
      ruleForm: {
        name: '',
        content: '',
        type: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入广告名称', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '请选择广告类型', trigger: 'change' },
        ],
        content: [
          { required: true, message: '请输入广告内容', trigger: 'blur' },
        ],
      },
      typeList: {},
      agreement: {},
      agreementId: '',
      isSearch: false,
      page: {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      },
      agreementList: [],

    };
  },
  created() {
    this.getAgreementList();
    this.getTypeList()
  },
  methods: {
    // 获取广告类型
    async getTypeList() {
      const res = await getDictValueAndNameSource("PROTOCOLTYPE");
      if (res.code === 200) {
        this.typeList = res.data;
        console.log("商品税率", this.typeList);
      }
    },
    async getAgreementList() {
      if (!this.isSearch) {

      }
      const res = await getAgreementList({
        ...this.page,
      });
      if (res.code === 200) {
        console.log(res);
        const result = res.data;
        this.agreementList = result.list;
        this.page.pageSize = result.pageSize;
        this.page.pageNum = result.pageNum;
        this.page.total = result.total;
        console.log("agreementList", this.agreementList);
        const $table = this.$refs.xTable1
        $table.loadData(this.agreementList);
      } else {
        // this.$message.error(res.message);
      }
    },
    // 获取条数改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageNum = 1;
      console.log(`每页 ${val} 条`);
      this.getAgreementList();
    },
    // 获取页数改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.pageNum = val;
      this.getAgreementList();
    },
    checkagreement(row) {
      this.drawer = true
      this.agreement = row
    },
    async searchFn() {
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.isSearch = true;
      // this.getAgreementList();
    },
    resetFn() {
      this.name = "";
      this.region = "";
      this.page = {
        pageNum: 1,
        pageSize: 20,
        total: 0,
      };
      this.isSearch = false;
      // this.selectedOptions = [];
      // this.getAgreementList();
    },
    addFn() {
      this.title = '新增广告'
      this.drawer = true
    },
    submitForm() {
      if (this.title === '新增广告') {

        this.$refs.ruleForm.validate(async (isOK) => {
          if (isOK) {
            console.log('提交');
            const res = await addAgreement({ ...this.ruleForm })
            if (res.code === 200) {
              this.$refs.ruleForm.resetFields();
              this.$message.success('新增广告成功')
              this.drawer = false
              this.getAgreementList()
            }

          }
        })
      } else if (this.title === '编辑广告') {

        this.$refs.ruleForm.validate(async (isOK) => {
          if (isOK) {
            console.log('提交');
            const res = await updateAgreement({ ...this.ruleForm, id: this.agreementId })
            if (res.code === 200) {
              this.$refs.ruleForm.resetFields();
              this.$message.success('新增广告成功')
              this.drawer = false
              this.getAgreementList()
            }

          }
        })
      }
    },
    cancelFn() {
      this.$refs.ruleForm.resetFields();
      this.drawer = false
    },
    agreementDetail(row) {
      this.drawer = true
      this.title = '编辑广告'
      this.agreementId = row.id
      this.ruleForm.name = row.name
      this.ruleForm.content = row.content
      this.ruleForm.type = row.type

    },
    async del(row) {
      const res = await deleteAgreement({ id: row.id })
      if (res.code === 200) {
        this.$message.success('删除成功')
        this.getAgreementList()
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.txtBox {
  padding-left: 20px;
  margin-bottom: 30px;

}

.btnBOX {
  text-align: center;
}
</style>
